<template>
  <div class="wrap">
    <div class="content" @click="showImgViewer">
<!--      <el-image :src="require{'@/assets/trackPic.png'}"></el-image>-->
      <img src="@/assets/trackPic.png" width="650rem"/>

    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList" />
  </div>
<!--  <el-main>-->
<!--     <el-form>-->
<!--       <el-form-item label="行程图片">-->
<!--         &lt;!&ndash;图片点击后预览&ndash;&gt;-->
<!--         <el-image-viewer-->
<!--           v-if="showRealityViewer"-->
<!--           :on-close="closeRealityViewer"-->
<!--           :url-list="[form.traceAbilityMap]" />-->
<!--         <img onerror="this.src='E:\\Program Files\\JetBrains\\testWeb01\\src\\assets\\trackPic.png'" :src="form.traceAbilityMap" @click="onRealityPreview" style="width:45rem;height:30rem">-->
<!--&lt;!&ndash;         <img onerror="this.src='https://img0.baidu.com/it/u=2636536621,699606172&fm=26&fmt=auto'" :src="form.traceAbilityMap" @click="onRealityPreview" style="width:45rem;height:30rem">&ndash;&gt;-->
<!--       </el-form-item>-->

<!--     </el-form>-->
<!--  </el-main>-->
</template>

<script>
import {eventBus} from '../../../assets/Bus'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: "TraceAbility",
  data () {
    return {
      imgViewerVisible: false,
      imgList:[
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  },
  components:{
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  methods: {
    showImgViewer(){
      this.imgViewerVisible = true;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动

    },
    closeImgViewer(){
      this.imgViewerVisible = false;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
    // onSubmit () {
    //   console.log('submit!')
    // },
    // onPreview() {
    //   this.showViewer = true
    // },
    // onRealityPreview(){
    //   this.showRealityViewer = true
    // },
    // // 关闭查看器
    // closeViewer() {
    //   this.showViewer = false
    // },
    // closeRealityViewer() {
    //   this.showRealityViewer = false
    // },
    // getData(taskId){
    //   this.$http.get('task/findTaskInfoById',{params:{taskId}}).then(response => {
    //     var data = response.data
    //     if (data.status == 200) {
    //       let item = data.data;
    //       this.form.realityImage = "E:\\Program Files\\JetBrains\\testWeb01\\src\\assets\\trackPic.png";
    //       //let items = data.data.rows;
    //     } else {
    //       console.log('失败')
    //     }
    //   })
    // }
  },
  created() {
    // eventBus.$on("getTaskTableRowData", rowData => {
    //   this.getData(rowData[1]);
    // });
  }
}
</script>

<style scoped>
.content{
  width: 50%;
  height: 100%;
  padding-top: 5rem;
  /*background: pink;*/
}
</style>
